<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title th:text="#{screen.success.header}">Generic Success View</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main role="main" class="container mt-3 mb-3">
    <div layout:fragment="content" class="row">
        <script>
            function jqueryReady() {
                $('table').DataTable();
            }
        </script>
        <div class="w-100 m-auto mdc-card card p-4 text-justify">
            <h2>
                <i class="mdi mdi-door-open fas fa-door-open"></i>
                <span th:utext="#{screen.success.header}">Log In Successful</span>
                <span id="principalId" th:utext="${authentication.principal.id}" style="display:none;"/>
            </h2>

            <p th:utext="#{screen.success.success(${authentication.principal.id})}">You, <strong>username</strong>, have successfully logged into the Central Authentication
                Service.
                However, you are seeing this page because CAS does not know about your target destination and how
                to get you there. Examine the authentication request again and make sure a target service/application that is authorized and registered with CAS is specified.</p>

            <p th:utext="#{screen.success.security}">
                When you are finished, for security reasons, please <a href="logout">log out</a> and exit your web browser.
            </p>

            <div th:remove="tag"
                 th:if="${'true' == #strings.defaultString(#themes.code('cas.successful-login.display-attributes'), 'true')}">
                <p th:unless="${#maps.isEmpty(authentication.principal.attributes)}">
                    The following attributes and services are resolved and available for <strong th:utext="${authentication.principal.id}"/>:

                    <div id="attribute-tabs" class="mdc-tab-bar" role="tablist">
                        <div class="mdc-tab-scroller">
                            <div class="mdc-tab-scroller__scroll-area">
                                <nav class="nav nav-tabs mdc-tab-scroller__scroll-content">
                                    <button id="principal-tab" class="mdc-tab nav-link" role="tab" aria-selected="true" data-toggle="tab" data-target="attribute-tab-0">
                                            <span class="mdc-tab__content">
                                                <span class="mdc-tab__text-label">Principal</span>
                                            </span>
                                        <span class="mdc-tab-indicator">
                                                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                                            </span>
                                        <span class="mdc-tab__ripple"></span>
                                    </button>
                                    <button id="auth-tab" class="mdc-tab nav-link" role="tab" aria-selected="true" data-toggle="tab" data-target="attribute-tab-1">
                                            <span class="mdc-tab__content">
                                                <span class="mdc-tab__text-label">Authentication</span>
                                            </span>
                                        <span class="mdc-tab-indicator">
                                                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                                            </span>
                                        <span class="mdc-tab__ripple"></span>
                                    </button>
                                    <button id="services-tab" th:if="${authorizedServices}" class="mdc-tab nav-link" role="tab" aria-selected="true" data-toggle="tab"
                                            data-target="attribute-tab-2">
                                            <span class="mdc-tab__content">
                                                <span class="mdc-tab__text-label">Services</span>
                                            </span>
                                        <span class="mdc-tab-indicator">
                                                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                                            </span>
                                        <span class="mdc-tab__ripple"></span>
                                    </button>
                                </nav>
                            </div>
                        </div>
                    </div>

                    <section id="attribute-tab-0" class="attribute-tab tab-pane active">
                        <div class="w-100 mdc-data-table table-responsive mx-auto my-4" id="divPrincipalAttributes" role="tabpanel" aria-labelledby="attributes-tab">
                            <table id="attributesTable" class="table table-striped" style="white-space: unset">
                                <thead>
                                <tr class="mdc-data-table__header-row">
                                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Attribute</th>
                                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Value(s)</th>

                                </tr>
                                </thead>
                                <tbody class="mdc-data-table__content">
                                <tr th:each="attribute : ${authentication.principal.attributes}" class="mdc-data-table__row">
                                    <td class="mdc-data-table__cell"><code><kbd th:utext="${attribute.getKey()}"/></code></td>
                                    <td class="mdc-data-table__cell">
                                        <code><kbd th:utext="${#strings.abbreviate(attribute.getValue(), 80)}"/></code>
                                    </td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                    </section>

                    <section id="attribute-tab-1" class="d-none attribute-tab tab-pane">
                        <div class="w-100 mdc-data-table table-responsive mx-auto my-4" id="divAuthenticationAttributes" role="tabpanel" aria-labelledby="attributes-tab">
                            <table id="attributesTable" class="mdc-data-table__table table table-striped" style="white-space: unset">
                                <thead>
                                <tr class="mdc-data-table__header-row">
                                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Attribute</th>
                                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Value(s)</th>
                                </tr>
                                </thead>
                                <tbody class="mdc-data-table__content">

                                <tr th:attr="id=${attribute.getKey()}"
                                    th:each="attribute : ${authentication.attributes}" class="mdc-data-table__row">
                                    <td class="mdc-data-table__cell attribute-key"><code><span th:utext="${attribute.getKey()}"/></code></td>
                                    <td class="mdc-data-table__cell attribute-value">
                                        <code><kbd th:utext="${#strings.abbreviate(attribute.getValue(), 80)}"/></code>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </section>

                    <section id="attribute-tab-2" class="d-none attribute-tab tab-pane" th:if="${authorizedServices}">
                        <div class="w-100 mdc-data-table mx-auto my-4" id="divAuthorizedServices" role="tabpanel" aria-labelledby="attributes-tab">
                            <table id="attributesTable" class="mdc-data-table__table table table-striped" style="white-space: unset">
                                <thead>
                                <tr class="mdc-data-table__header-row">
                                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col"></th>
                                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Service</th>
                                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Description</th>

                                </tr>
                                </thead>
                                <tbody class="mdc-data-table__content">

                                <tr th:each="service : ${authorizedServices}" class="mdc-data-table__row">
                                    <td class="mdc-data-table__cell">
                                        <i class="mdi mdi-web fas fa-globe" th:unless="${service.logo}"></i>
                                        <img th:src="${service.logo}" width="26px" height="26px" th:if="${service.logo}"/>
                                    </td>
                                    <td class="mdc-data-table__cell">
                                        <a th:id="${'service' + service.id}" th:title="${service.name}" th:alt="${service.description}" th:utext="${service.name}"/>

                                        <script th:inline="javascript">
                                            /*<![CDATA[*/
                                            let serviceId = /*[[${service.serviceId}]]*/;
                                            if (isValidURL(serviceId)) {
                                                let id = /*[[${'service' + service.id}]]*/;
                                                $(`a#${id}`).attr("href", serviceId);
                                            }
                                            /*]]>*/
                                        </script>
                                    </td>
                                    <td class="mdc-data-table__cell">
                                        <span th:utext="${service.description}"/>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </section>
            </div>
        </div>


        <script type="text/javascript" th:inline="javascript">
            let divs = ["divPrincipalAttributes", "divAuthenticationAttributes", "divAuthorizedServices"]
            divs.forEach(id => {
                // console.log(`Selecting element ${id}`)
                let div = document.querySelector(`#${id}`);
                if (div !== null) {
                    $(() => {
                        if (typeof mdc === 'undefined') {
                            $('#principal-tab').tab('show');
                            $('button[data-toggle="tab"]').on('shown.bs.tab', event => {
                                let id = $(event.target).data('target');
                                $('.tab-pane').addClass('d-none');
                                $(`#${id}`).removeClass('d-none');

                            })
                        } else {
                            new mdc.dataTable.MDCDataTable(div);
                            tabify(mdc);
                        }
                    });
                }
            });

            function tabify(material) {
                let elm = document.getElementById('attribute-tabs');
                let tabs = material.tabBar.MDCTabBar.attachTo(elm);

                tabs.listen('MDCTabBar:activated', ev => {
                    let index = ev.detail.index;
                    $('.attribute-tab').addClass('d-none');
                    $(`#attribute-tab-${index}`).removeClass('d-none');
                });

                tabs.foundation.adapter.activateTabAtIndex(0);
                return tabs;
            }

        </script>
    </div>
</main>
</body>
</html>
